@extends('admin.base')
@section('content')
    <div class="layui-card">
        <blockquote class="layui-elem-quote form-inline layui-form" style="font-size: 14px;padding: 10px">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form" >
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="nid" style="font-weight: bold">商品ID</label>：
                    <div class="layui-input-inline">
                        <input type="text" name="nid" id="nid" placeholder="商品ID" class="layui-input" >
                    </div>
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="name" style="font-weight: bold">商品名称</label>：
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" placeholder="商品名称" class="layui-input" >
                    </div>
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="start_price" style="font-weight: bold">到手价区间</label>：
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="最小到手价" name="start_price" id="start_price">
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="float:none;display: inline;margin-right: 0">-</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="最大到手价" name="end_price" id="end_price">
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="min_amount" style="font-weight: bold">优惠金额区间</label>：
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="最小优惠金额" name="min_amount" id="min_amount">
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="float:none;display: inline;margin-right: 0">-</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="最大优惠金额" name="max_amount" id="max_amount">
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="start_time" style="font-weight: bold">有效时间</label>：
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="活动开始时间" name="start_time" id="start_time">
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="float:none;display: inline;margin-right: 0">-</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="活动结束时间" name="end_time" id="end_time">
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="status" style="font-weight: bold">商品状态</label>：
                    <div class="layui-input-inline">
                        <select id="status">
                            <option value="3">全部</option>
                            <option value="1">上架</option>
                            <option value="0">下架</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="min_active" style="font-weight: bold">上架时间</label>：
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" placeholder="上架开始时间" name="min_active" id="min_active">
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="float:none;display: inline;margin-right: 0">-</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="上架结束时间" name="max_active" id="max_active">
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="from" style="font-weight: bold">数据来源</label>：
                    <div class="layui-input-inline">
                        <select id="from">
                            <option value="0">全部</option>
                            <option value="1">人工导入</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin: 3px 0;">
                    <label class="control-label" for="type" style="font-weight: bold">所属平台</label>：
                    <div class="layui-input-inline">
                        <select id="type">
                            <option value="0">全部</option>
                            <option value="1">天猫</option>
                            <option value="2">京东</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        </blockquote>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('goods.goods.destroy')
                        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                    @endcan
                </div>
            </script>
            <script type="text/html" id="statusText">
                @{{# if(d.shelf_status==1){ }}
                <span class="layui-badge layui-bg-green">上架</span>
                @{{# }else if(d.shelf_status==0){ }}
                <span class="layui-badge">下架</span>
                @{{# } }}
            </script>
            <script type="text/html" id="read">
                <input disabled type="checkbox" lay-skin="switch" lay-text="未读|已读" @{{ d.read==1?'checked':'' }} >
            </script>
            <script type="text/html" id="thumb">
                <a href="@{{d.pic_url}}" data-fancybox="rfUploadImg">
                    <img src="@{{d.pic_url}}" alt="" width="28" height="28"/>
                </a>
            </script>
            <script type="text/html" id="url">
                <span class="layui-table-link" onclick="showDetail('@{{d.coupon_url}}')">查看</span>
            </script>
            <script type="text/html" id="toolbarDemo">
                @can('goods.goods.create')
                    <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
                @endcan

                @can('goods.goods.destroy')
                    <button class="layui-btn layui-btn-sm layui-btn-danger"  lay-event="delete">删除</button>
                @endcan
                <button type="button" class="layui-btn layui-btn-sm" lay-event="search">搜索</button>
            </script>
        </div>

    </div>
@endsection

@section('script')
    @can('goods.goods')
        <script>
            layui.use(['layer','table','form'],function () {
                var layer = layui.layer;
                var form = layui.form;
                var table = layui.table;
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    ,height: 'full-340'
                    ,url: "{{ route('admin.goods.data') }}" //数据接口
                    ,page: true //开启分页
                    ,toolbar: '#toolbarDemo'
                    ,defaultToolbar: ['filter', 'print', 'exports']
                    ,cols: [[ //表头
                        {checkbox: true,fixed: true}
                        ,{field: 'num_iid', title: '商品ID', sort: true,width:125}
                        ,{field: 'goods_name', title: '商品名称',width:100}
                        ,{field: 'coupon_url', title: '优惠券链接',toolbar: '#url',width:100}
                        ,{field: 'pic_url', title: '主图',toolbar: '#thumb',width:60}
                        ,{field: 'sell_price', title: '商品价格',width:90}
                        ,{field: 'coupon_amount', title: '优惠劵金额',width:100}
                        ,{field: 'actual_price', title: '到手价',width:80}
                        ,{field: 'com_rate', title: '佣金',templet:function (d) { return '<span>'+d.com_rate+'%</span>'} ,width:80}
                        ,{field: 'own_sale', title: '懒人销量',width:90}
                        ,{field: 'tao_sale', title: '淘宝销量',width:90}
                        ,{field: 'sort', title: '排序值',width:80}
                        ,{field: 'weigh', title: '人工权重',width:90}
                        ,{field: 'shelf_status', title: '状态',toolbar: '#statusText',width:70}
                        ,{field: 'cate_name', title: '懒人商品分类',width:120}
                        ,{field: 'shelf_time', title: '上架时间',width:160}
                        ,{field: 'active_start_time', title: '活动开始时间',width:160}
                        ,{field: 'active_end_time', title: '活动结束时间',width:160}
                        ,{fixed: 'right', width: 220, align:'center', toolbar: '#options',width:100}
                    ]]
                });

                //监听工具条
                table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    if(layEvent === 'del'){
                        layer.confirm('确认删除吗？', function(index){
                            $.post("{{ route('admin.goods.destroy') }}",{_method:'delete',ids:[data.id]},function (result) {
                                if (result.code==0){
                                    obj.del(); //删除对应行（tr）的DOM结构
                                }
                                layer.close(index);
                                layer.msg(result.msg)
                            });
                        });
                    } else if(layEvent === 'edit'){
                        location.href = '/admin/message/'+data.id+'/edit';
                    }
                });
                table.on('toolbar', function(obj){
                    if(obj.event=='add'){
                        layer.open({
                            type:2,
                            title:'导入商品数据',
                            area : ['630px','430px'],
                            content:"{{route('admin.goods.create')}}"
                        })
                    }else if(obj.event=='delete'){ //按钮批量删除
                        var ids = []
                        var hasCheck = table.checkStatus('dataTable')
                        var hasCheckData = hasCheck.data
                        if (hasCheckData.length>0){
                            $.each(hasCheckData,function (index,element) {
                                ids.push(element.id)
                            })
                        }
                        if (ids.length>0){
                            layer.confirm('确认删除吗？', function(index){
                                $.post("{{ route('admin.goods.destroy') }}",{_method:'delete',ids:ids},function (result) {
                                    if (result.code==0){
                                        dataTable.reload()
                                    }
                                    layer.close(index);
                                    layer.msg(result.msg);
                                });
                            })
                        }else {
                            layer.msg('请选择删除项')
                        }
                    }else if(obj.event=='search'){
                        var start_time = $("#start_time").val()
                        var end_time = $("#end_time").val();
                        var nid = $("#nid").val();
                        var name = $("#name").val();
                        var min_amount = $("#min_amount").val();
                        var max_amount = $("#max_amount").val();
                        var start_price = $("#start_price").val();
                        var end_price = $("#end_price").val();
                        var status = $("#status").val()
                        var min_active = $("#min_active").val();
                        var max_active = $("#max_active").val();
                        var from = $("#from").val()
                        var type = $("#type").val()
                        dataTable.reload({
                            where:{start_time:start_time,end_time:end_time,nid:nid,name:name,min_amount:min_amount,max_amount:max_amount,start_price:start_price,end_price:end_price,status:status,min_active:min_active,max_active:max_active,from:from,type:type},
                            page:{curr:1}
                        })
                    }
                });
            })

            layui.use('laydate', function(){
                var laydate = layui.laydate;
                //日期时间选择器
                laydate.render({
                    elem: '#start_time'
                    ,type: 'datetime'
                });
                laydate.render({
                    elem: '#end_time'
                    ,type: 'datetime'
                });
                laydate.render({
                    elem: '#min_active'
                    ,type: 'datetime'
                });
                laydate.render({
                    elem: '#max_active'
                    ,type: 'datetime'
                });
            });
            function showDetail(url) {
                layer.open({
                    type: 2,
                    title: '优惠券',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['480px', '90%'],
                    content:url //iframe的url
                });
            }
        </script>
    @endcan
@endsection